import QtQuick 2.12
import QtQuick.Window 2.12

import QtQuick.Controls 2.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("布局测试")

//    Text{
//        id:myText
//        //anchors.centerIn: parent
//        anchors.horizontalCenter: parent.horizontalCenter;
//        anchors.topMargin: 10

//        color : "blue"
//        font.pixelSize: 50
//        text: "一只会飞的猪"
//    }

//    Rectangle{
//        id:myrect
//        x:50
//        y:80
//        anchors.left: myText.left

//        width: 300
//        height: 100
//        color: "cyan"; // 矩形填充颜色
//        border.width: 10; // 矩形边框粗细程度
//        border.color: "orange"; // 矩形边框颜色
//        radius: 10; // 圆角

//        TextInput{
//            x : 15
//            y: 10

//            width: 80
//            height : 30
//        }
//    }

    //Row布局测试
//    Rectangle{
//        id: myRect
//        x: 30
//        y: 20
//        width: 500
//        height: 100
//        border.color: "red"
//        border.width: 5


//        Row{
//            anchors.centerIn: parent
//            spacing: 15

//            Rectangle{color:"green";width: 40;height: 40 }
//            Rectangle{color:"red";width: 40;height: 40 }
//            Rectangle{color:"blue";width: 40;height: 40 }
//            Rectangle{color:"cyan";width: 40;height: 40 }
//            Rectangle{color:"orange";width: 40;height: 40 }
//            Rectangle{color:"black";width: 40;height: 40 }
//        }
//    }


//    Rectangle{
//            id:mycolumnrect2
//            x:30
//            y:150
//            width: 500
//            height: 350
//            border.width: 4
//            border.color: "red"
//            // radius:数字

//            Column{
//                anchors.centerIn: parent // 相对背景父窗口居中
//                spacing: 10 // 设置行与行之间的间距
//                Rectangle{color:"green";width: 40;height: 40 }
//                Rectangle{color:"red";width: 40;height: 40 }
//                Rectangle{color:"blue";width: 40;height: 40 }
//                Rectangle{color:"cyan";width: 40;height: 40 }
//                Rectangle{color:"orange";width: 40;height: 40 }
//                Rectangle{color:"black";width: 40;height: 40 }
//            }
//        }


    //网格布局测试
//    Rectangle{
//        id:myrowrect4
//        x:30
//        y:50
//        width: 400
//        height: 400
//        border.width: 4
//        border.color: "red"
//        // radius:数字

//        Grid{
//            anchors.centerIn: parent // 相对背景父窗口居中
//            spacing: 20 // 设置行与行之间的间距
//            columns: 4
//            Rectangle{color:"green";width: 40;height: 40 }
//            Rectangle{color:"red";width: 40;height: 40 }
//            Rectangle{color:"blue";width: 40;height: 40 }
//            Rectangle{color:"cyan";width: 40;height: 40 }
//            Rectangle{color:"orange";width: 40;height: 40 }
//            Rectangle{color:"black";width: 40;height: 40 }
//            Rectangle{color:"green";width: 40;height: 40 }
//            Rectangle{color:"red";width: 40;height: 40 }
//            Rectangle{color:"blue";width: 40;height: 40 }
//            Rectangle{color:"cyan";width: 40;height: 40 }
//            Rectangle{color:"orange";width: 40;height: 40 }
//            Rectangle{color:"black";width: 40;height: 40 }
//            Rectangle{color:"green";width: 40;height: 40 }
//            Rectangle{color:"red";width: 40;height: 40 }
//            Rectangle{color:"blue";width: 40;height: 40 }
//            Rectangle{color:"cyan";width: 40;height: 40 }
//            Rectangle{color:"orange";width: 40;height: 40 }
//            Rectangle{color:"black";width: 40;height: 40 }
//            Rectangle{color:"green";width: 40;height: 40 }
//            Rectangle{color:"red";width: 40;height: 40 }
//            Rectangle{color:"blue";width: 40;height: 40 }
//            Rectangle{color:"cyan";width: 40;height: 40 }
//            Rectangle{color:"orange";width: 40;height: 40 }
//            Rectangle{color:"black";width: 40;height: 40 }
//            Rectangle{color:"green";width: 40;height: 40 }
//        }
//    }


    // Flow流方布局
    Flow{
        anchors.fill:parent //  填充方式
        anchors.margins: 10
        spacing: 20 // 设置行与行之间的间距

        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
    }
}


